<template>
    <card style="text-align:left;width:85%;margin:100px auto;">
        <p slot="title">来电确认
            <!-- <a class="recall-con"><Icon type="android-call" color="#19be6b" size="25" @click.native="reCall"></Icon></a> -->
        </p>
        <div slot="extra">
            <Form inline v-on:submit.native.prevent="" >
                <FormItem>
                    <Input type="text" placeholder="请输入用户邮箱或注册手机号或者微信号" v-model="searchKeyword"   @keyup.enter.native.stop.prevent="doSearch" style="width: 300px">
                    <Icon type="search" slot="prepend"></Icon>
                </Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" class="searchBtnColor" @click="doSearch">搜索</Button>
                </FormItem>
                <FormItem>
                     <Button type="success" @click="showCreateUser">新建</Button>
                </FormItem>
            </Form>
        </div>
        <div class="confirm-con">
            <div class="left-box"><p>来电号码：<span v-if="callUserInfo.telNo  && callUserInfo.callType=='Inbound'">{{callUserInfo.telNo}}</span></p></div>
            <Table size="small" :row-class-name="rowClassName"  class="student-list-con" :columns="studentsListColumn" :data="studentsData" @on-row-click="goVoiceCall"></Table>
            <wordTemplate v-bind:type="'start'"></wordTemplate>
        </div>
    </card>   
</template>
<style scoped>
    tr.ivu-table-row {
        cursor: pointer;
    }
    
    .confirm-con {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }
    
    .student-list-con {
        width: 501px;
        margin-right: 10px;
    }
    
    .left-box {
        width: 200px;
        height: 200px;
        border-right: solid 1px #dedede;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        text-align: center;
    }
    
    .ivu-table-body {
        overflow: hidden;
    }
    
    .ivu-card-head p,
    .ivu-card-head-inner {
        height: 30px;
        line-height: 30px;
    }
    
    .recall-con {
        vertical-align: -3px;
        margin-left: 10px;
        cursor: pointer;
    }
</style>
<style>
    .confirm-con .ivu-table-row {
        cursor: pointer;
    }
    
    .confirm-con .ivu-table .demo-table-info-row td {
        background-color: #ddd;
    }
    
    .confirm-con .ivu-table .demo-table-error-row td {
        background-color: #fff;
    }
</style>
<script>
    import {
        mapActions,
        mapGetters
    } from 'vuex'
    import userService from 'service/userService.js'
    import thirdService from 'service/thirdService.js'
    import wordTemplate from 'components/voiceCall/wordTemplate.vue'
    import configService from 'service/configService.js'
    import {
        mainRouter
    } from '@/router/index.js'

    // import createUserAction from 'components/user/createUser.js'
    export default {
        name: 'callConfirm',

        data() {
            return {
                searchKeyword: '',
                studentsListColumn: [{
                    title: ' ',
                    key: 'num',
                    width: 30
                }, {
                    title: '学生ID',
                    key: 'id',
                    width: 100
                }, {
                    title: '学生姓名',
                    key: 'name',
                    width: 140
                }, {
                    title: '英文名字',
                    key: 'englishName',
                    width: 130
                }, {
                    title: '与学生关系',
                    key: 'relation',
                    width: 100
                }],
                studentsListData: []

            }
        },
        components: {
            wordTemplate
        },
        created() {
            this.$store.dispatch('setCacheExcludeComponentName', [])
            this.getLoginUserInfo()

            this.getStudentsByMobile(this.callUserInfo.ani)

            eventBus.$on('refreshCallConfirm', function() {
                this.$forceUpdate()
            })

        },
        watch: {
            searchKeyword: function(val) {
                if (val.length == 0) {
                    this.getStudentsByMobile(this.callUserInfo.ani)
                }
            }
        },
        computed: {
            studentsData() {
                return this.studentsListData
            },
            ...mapGetters({
                callUserInfo: 'callUserInfo',
                loginUserInfo: 'loginUserInfo'
            })

        },
        methods: {
            doSearch() {
                if (this.searchKeyword) {
                    if (!(/^1[34578]\d{9}$/.test(this.searchKeyword))) {
                        this.getStudentById(this.searchKeyword)
                        return false;
                    } else {
                        this.getStudentsByMobile(this.searchKeyword)
                    }
                }
            },
            ...mapActions(['getLoginUserInfo']),
            async getStudentById(stuId) {
                let studentData = []
                let studentObj = await thirdService.getStudentById({
                    'id': stuId
                })

                if (studentObj) {
                    let data = this.getRelationDecryptMobileList(studentObj.familyId)

                    data.map((d, index) => {
                        if (d.decryptMobile == this.callUserInfo.telNo) {
                            studentObj.relation = this.Func.getChineseRealation(d.relation)
                        }

                    })
                    studentData.push(studentObj)
                }

                this.studentsListData = studentData
            },
            async getStudentsByMobile(telNo) {
                let jsondata = await thirdService.getStudentsByMobile({
                    'mobile': telNo
                })


                if (!jsondata) {
                    jsondata = []
                } else {
                    jsondata.map(async(item, index) => {
                        let data = this.getRelationDecryptMobileList(item.familyId)
                        data.map((d, index) => {
                            if (d.decryptMobile == this.callUserInfo.telNo) {
                                item.relation = this.Func.getChineseRealation(d.relation)
                                item.parentId = d.id
                                item.mobileSkey = d.mobileSkey
                            }

                        })
                    })
                }

                this.studentsListData = jsondata
            },
            getRelationDecryptMobileList(familyId) {
                let data = []
                thirdService.getSyncParentsByFamilyIds({
                    "familyIds": familyId
                }).done(function(jsondata) {
                    if (jsondata.code == 200) {
                        let familyData = jsondata.data[familyId]
                        familyData.forEach((item, index) => {
                            userService.decryptMobile({
                                skeys: '{"skeys":["' + item.mobileSkey + '"]}'
                            }).done(function(jsondata) {
                                if (jsondata.state) {
                                    item.decryptMobile = jsondata.data.sources[item.mobileSkey]
                                    data.push(item)
                                }
                            })
                        })

                    }
                })
                return data

            },
          // showCreateUser(){
          //     console.log(1234567890)
          //   this.$router.push({
          //     path: 'addCallConfirm',
          //   });
          // },
            async goVoiceCall(rowdata) {
                let studentId = rowdata.id


                // let data = this.getRelationDecryptMobileList(rowdata.familyId)

                let callUserRelationTheStudentInfo = this.studentsListData.find((item, index) => {
                    return studentId = item.id
                })


                this.$store.dispatch('removePageTags', {
                    'path': '/voicecall'
                })


                this.$store.dispatch('setCacheExcludeComponentName', ['voiceCall'])

                let updateTagObj = {
                    path: '/voicecall?studentId=' + studentId,
                    is_nav: false,
                    title: '呼叫弹屏-' + rowdata.name,
                    name: 'voicecall_index',
                    children: []
                }

                this.$store.dispatch('recordDetailPageTags', updateTagObj)
                this.$store.dispatch('setCallUserInfoRelationTheStudent', callUserRelationTheStudentInfo)
                this.$router.push({
                    path: 'voicecall',
                    query: {
                        'studentId': studentId
                    }
                });
            },
            rowClassName(row, index) {
                if (index % 2 == 0) {
                    return 'demo-table-info-row';
                } else if (index % 2 == 1) {
                    return 'demo-table-error-row';
                }
                return '';
            }


        },
        // beforeRouteEnter(to, from, next) {
        //     console.log('---to---')
        //     console.log(to)
        //     console.log(from)
        //     next()
        // },
        // beforeRouteLeave: (to, from, next) => {
        //     //设置路由的meta
        //     console.log(to)
        //     to.meta.keepAlive = false
        //     next()
        // }

    }
</script>